import "./Skills.scss";
import Load from "@animation/Load";
import TrackVisibility from "react-on-screen";
import axios from "axios";

interface Skill {
  percent: number;
  name: string;
}
interface SkillRequestData {
  status: string;
  data: {
    data: Skill[];
    results: number;
  };
}

const Skills = memo(() => {
  const [skills, setSkills] = useState<Skill[]>([]);

  useEffect(() => {
    axios.get<SkillRequestData>("/api/skills?sort=sort").then((res) => {
      const data = res.data;
      if (data.status === "success") {
        setSkills(res.data.data.data);
      }
    });
  }, []);

  return (
    <section className="skills-com" id="skills">
      <div className="show-box">
        <p className="title">Skills</p>
        <TrackVisibility className="skill-box" once>
          {({ isVisible }) =>
            skills.map((v, index) => (
              <div className="skill-target" key={index}>
                <Load
                  percent={v.percent}
                  name={v.name}
                  startAnimat={isVisible}
                />
              </div>
            ))
          }
        </TrackVisibility>
      </div>
      <div className="background-image-left">
        <img src="/img/color-sharp.png" alt="bg load error" />
      </div>
    </section>
  );
});

export default Skills;
